import React from 'react';

class Handler extends React.Component {
  constructor() {
    super();
    console.log('constructor: 我是创建阶段第一个执行的生命周期')
    // construtor作用:
    // 1. 声明state;
    // 2. 为事件处理程序绑定this: 
    // 例如: this.xxxx = this.xxxx.bind(this)
    this.state = {
      age: 2
    }
  }
  componentDidMount() {
    console.log('componentDidMount: 我是创建阶段第三个执行的生命周期')
    // componentDidMount作用:
    // 1. 发起网络请求;
    // 2. 操作DOM
    console.log(document.querySelector('p'))
  }
  render() {
    console.log('render: 我是创建阶段第二个执行的生命周期')
    // render主要用来渲染UI结构
    // 注意: 不要再render中使用setState
    // setState作用: 1. 更新数据; 2. 重新渲染UI
    // this.setState({age: this.state.age + 1}) 
    // 此处会形成递归调用, 因此不能在render中使用setState
    return(
      <p>创建阶段的生命周期</p>
    )
  }
}

export default Handler